<template>

  <div class="common-layout">

      <el-row :gutter="10">
        <el-col span="3" class="c1">
            <div>
                <span >
                    {{ time }}
                </span>
            </div>
        </el-col>
        <el-col span="3" class="c2">
            <div>
                <span>
                    检测到运动次数:{{ count }}
                </span>
            </div>
        </el-col>
        <el-col span="4" class="c3">
            <div class="image-container">
             <img v-for="(imgUrl, index) in displayedImages" :key="index" :src="imgUrl" class="images" />
           </div>
            <!-- <div class = "image-container"> -->
                <!-- <img class="images" :src="url1" >
                <img class="images" :src="url2" >
                <img class="images" :src="url3" >
                <img class="images" :src="url4" >
                <img class="images" :src="url5" >     -->
                <!-- <img v-for="(imgUrl, index) in displayedImages" :key="index" :src="imgUrl" class="images" /> -->
            <!-- </div> -->
        </el-col>
        <!-- <el-col span="1" class="c4">
            <div>
                <el-button type="primary"  text>查看</el-button>
            </div>
        </el-col> -->
      </el-row>


  </div>

</template>

<script setup lang="ts">
import { ref, onMounted, defineProps } from 'vue';

// var time = '2025-6-23 16:50-17:00'
// var count = 5

// var url1 = 'motion_frames/20250623_165653_750942.jpg'
// var url2 = 'motion_frames/20250623_165653_750942.jpg'
// var url3 = 'motion_frames/20250623_165653_750942.jpg'
// var url4 = 'motion_frames/20250623_165653_750942.jpg'
// var url5 = 'motion_frames/20250623_165653_750942.jpg'


const props = defineProps({
  time: {
    type: String,
    required: true
  },
  count: {
    type: Number,
    required: true
  },
  images: {
    type: Array,
    required: true
  }
});

const displayedImages = ref([]);

onMounted(() => {
  // 如果图片超过5张，只显示前5张
  displayedImages.value = props.images.length > 5 ? props.images.slice(0, 5) : props.images;

  
});

</script>

<style scoped>

.image-container {
  display: flex;
  flex-wrap: nowrap;
  /* gap: 10px;  */
  
  gap: 5px; /* 图片之间的间隔 */
  overflow-x: auto; /* 水平滚动 */
  /* padding: 5px; */
  max-width: 100%; /* 确保容器宽度不超过父元素 */
  padding: 5px; 
}
.images {
  /* width: 90%;
  height: 90%;
  object-fit: contain; */
    width: 180px; /* 可根据需要调整图片宽度 */
  height: auto;
  object-fit: contain; /* 保持图片的宽高比 */
  max-width: 100%; /* 确保图片不超过容器宽度 */
}

.el-container {
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.el-row {
  display: flex;
  flex-wrap: wrap;

  align-items: center;
  justify-content: center;
  
}

.common-layout {
  flex-direction: column;
  /* background-color: aqua; */
  
  background-color: rgb(246, 245, 245);
  
}

.c1{
    /* background-color: #f56c6c; */
    background-color: rgb(246, 245, 245);
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 2px #dcdfe6;

}
.c2{
    background-color: rgb(246, 245, 245);
    /* background-color: #f7ba2a; */
    height: 100px;
    width: 140px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 2px #dcdfe6;
}
.c3{
    background-color: rgb(200, 197, 197);
    /* background-color: #67c23a; */
    height: 100px;
    width: 890px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* Space between images */
    border: solid 2px #dcdfe6;
     overflow: hidden; /* 确保子元素不会超出父元素边界 */
}
.c4{
    background-color: rgb(246, 245, 245);
    /* background-color: #909399; */
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 2px #dcdfe6;
}

</style>